<template>
  <q-card flat>
    <q-tabs
      align="left"
      dense
      v-model="pageParam.order"
      @update:model-value="
        (val) => {
          pageParam.order = val
          f5()
        }
      "
      active-color="primary"
    >
      <q-tab name="read_num" label="最热" />
      <q-tab name="edit_time" label="最新" />
    </q-tabs>
    <div class="absolute-right row items-center">
      <q-btn flat icon="refresh" @click="f5()">
        <q-tooltip> 刷新 </q-tooltip>
      </q-btn>
    </div>
  </q-card>

  <q-intersection v-for="item in rows" :key="item.id" class="q-mt-sm h-118px">
    <q-card title="查看博客" class="" flat>
      <ItemArticle
        :item="item"
        @fav-user="
          () => {
            favUser(item)
          }
        "
        @article-liked="
          () => {
            likedClick(item)
          }
        "
      ></ItemArticle>
    </q-card>
    <q-separator />
  </q-intersection>

  <div v-show="loading" class="q-mt-sm">
    <SkeletonArticle></SkeletonArticle>
  </div>

  <q-card v-if="!loading && rows.length == 0" flat class="q-my-sm">
    <q-card-section class="text-center dark:bg-neutral-700">
      <div
        class="h-xs w-full bg-contain bg-center bg-no-repeat"
        style="background-image: url('images/no-data.svg')"
      ></div>

      <div class="text-base">暂无文章~~</div>
    </q-card-section>
  </q-card>

  <div class="full-width row flex-center" v-if="!loading && pageParam.totalPage > 0">
    <q-btn
      color="primary"
      :disable="pageParam.pageNum == pageParam.totalPage"
      :label="pageParam.pageNum == pageParam.totalPage ? '已加载全部' : '加载更多'"
      flat
      @click="
        () => {
          pageParam.pageNum++
          load()
        }
      "
    />
  </div>
</template>

<script setup lang="ts">
import ItemArticle from 'src/components/ItemArticle.vue'
import SkeletonArticle from 'src/components/SkeletonArticle.vue'
import { onMounted, ref } from 'vue'
import type { ApiType } from 'src/service/api'
import { articleStar, globalFollowUser, mainArticleFollowList } from 'src/service/api'
import { useYuan } from 'src/use'
import { useWebStore } from 'src/stores/webStore'
const webStore = useWebStore()

type rowsType = ApiType<typeof mainArticleFollowList>['Return']['rows'][0]

const rows = ref<Array<rowsType>>([])

const { Ok } = useYuan()

const pageParam = ref({
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  order: 'read_num',
})

const loading = ref(true)

const load = async () => {
  loading.value = true
  const { data, error } = await mainArticleFollowList(pageParam.value)
  loading.value = false
  if (!error) {
    pageParam.value.totalPage = data.totalPage
    pageParam.value.recordCount = data.recordCount
    rows.value.push(...data.rows)
  }
}

// 文章点赞
const likedClick = async (item: rowsType) => {
  if (!webStore.isLogin) {
    webStore.loginDig = true
    return
  }
  const { error, data } = await articleStar({ articleId: item.id })
  if (!error) {
    if (data) {
      item.isStar = true
      item.star = item.star + 1
      Ok('点赞成功')
    } else {
      item.isStar = false
      item.star = item.star - 1
      Ok('取消点赞成功')
    }
  }
}

const favUser = async (item: rowsType) => {
  const { data, error } = await globalFollowUser({ userId: item.userInfo.id })
  if (error) return
  if (data) {
    Ok('关注成功')
    item.userInfo.followFlag = true
    item.userInfo.fansNum++
  } else {
    Ok('取关成功')
    item.userInfo.followFlag = false
    item.userInfo.fansNum--
  }
}

const f5 = () => {
  pageParam.value.pageNum = 1
  rows.value = []
  load()
}
onMounted(() => {
  f5()
})
</script>

<style scoped></style>
